<div class="vcard">
    <!-- This may not be the best semantic use of HTML element -->
    <div class="fn n"><span class="given-name">John</span> <span class="family-name">Doe</span></div>
    <a class="sound" href="http://www.madgex.com/johndoe.mpeg">Pronunciation of my name</a>
    <div><img class="photo" src="images/photo.gif" alt="Photo of John Doe" /></div>

    <p>Nicknames:</p>
    <ul>
        <li class="nickname">Man with no name</li>
        <li class="nickname">Lost boy</li>
    </ul>

    <p>About:</p>
    <p class="note">John Doe is one of those names you always have issues with.</p>
    <p class="note">It can be a real problem booking a hotel room with the name John Doe.</p>

    <p>Companies:</p>
    <div>
        <img class="logo" src="images/logo.gif" alt="Madgex company logo" />
        <img class="logo" src="images/logo.gif" alt="Web Feet Media company logo" />
    </div>
    <ul>
        <li><a class="url org" href="http://www.madgex.com/">Madgex</a> <span class="title">Creative Director</span></li>
        <li><a class="url org" href="http://www.webfeetmedia.com/">Web Feet Media Ltd</a> <span class="title">Owner</span></li>
    </ul>
    
    <p>Tags: 
    <a rel="tag" class="category" href="http://en.wikipedia.org/wiki/design">design</a>, 
    <a rel="tag" class="category" href="http://en.wikipedia.org/wiki/development">development</a> and
    <a rel="tag" class="category" href="http://en.wikipedia.org/wiki/web">web</a>
    </p>
    
    <p>Phone numbers:</p>
    <ul>
        <li class="tel">
            <span class="type">Work</span> (<span class="type">pref</span>erred):
            <span class="value">+1 415 555 100</span>
        </li>
        <li class="tel"><span class="type">Home</span>: <span class="value">+1 415 555 200</span></li>
        <li class="tel"><span class="type">Postal</span>: <span class="value">+1 415 555 300</span></li>
    </ul>
    
    <p>Emails:</p>
    <ul>
        <li><a class="email" href="mailto:john.doe@madgex.com">John Doe at Madgex</a></li>
        <li><a class="email" href="mailto:john.doe@webfeetmedia.com">John Doe at Web Feet Media</a></li>
    </ul>
    <p>John Doe uses <span class="mailer">PigeonMail 2.1</span> or <span class="mailer">Outlook 2007</span> for email.</p>

    <p>Addresses:</p>
    <ul>
        <li class="label">
            <span class="adr">
                <span class="type">Work</span>: 
                <span class="street-address">North Street</span>, 
                <span class="locality">Brighton</span>, 
                <span class="country-name">United Kingdom</span>
            </span>
            
        </li>
        <li class="label">
            <span class="adr">
                <span class="type">Home</span>: 
                <span class="street-address">West Street</span>, 
                <span class="locality">Brighton</span>, 
                <span class="country-name">United Kingdom</span>
            </span>
        </li>
    </ul>
    
    <p>In emergency contact: <span class="agent">Jane Doe</span> or <span class="agent vcard">Dave Doe</span>.</p>
    <p>Key: <span class="key">hd02$Gfu*d%dh87KTa2=23934532479</span></p>
</div>